<script lang="ts" setup>
import { reactive } from 'vue';
import { HSMSOptions } from '../../common/types';
import { HSMSMode } from '../../common/enums';

const data = reactive<HSMSOptions>({
    mode: HSMSMode.Active,
    localIp: '127.0.0.1',
    localPort: 5000,
    remoteIp: '127.0.0.1',
    remotePort: 5000,
    linkTest: 60000,
    t3: 45000,
    t5: 10000,
    t6: 5000,
    t7: 10000,
    t8: 10000
});

const load = (options: HSMSOptions) => {
    data.mode = options.mode;
    data.localIp = options.localIp;
    data.localPort = options.localPort;
    data.remoteIp = options.remoteIp;
    data.remotePort = options.remotePort;
    data.linkTest = options.linkTest;
    data.t3 = options.t3;
    data.t5 = options.t5;
    data.t5 = options.t5;
    data.t7 = options.t7;
    data.t8 = options.t8;
}

const getData = () => {
    return { ...data };
}

defineExpose({ getData, load })
</script>
<template>
    <table class="app-table-1">
        <tbody>
            <tr>
                <th style="width: 80px">
                    Mode
                </th>
                <td style="width: 140px">
                    <el-select v-model="data.mode" style="width:130px">
                        <el-option label="Active" :value="HSMSMode.Active"></el-option>
                        <el-option label="Passive" :value="HSMSMode.Passive"></el-option>
                    </el-select>
                </td>
                <th style="width: 90px"></th>
                <td style="width: 130px"></td>
            </tr>
            <tr v-show="data.mode == HSMSMode.Active">
                <th>Remote IP</th>
                <td>
                    <el-input v-model="data.remoteIp" style="width: 130px;"></el-input>
                </td>
                <th>Remote Port</th>
                <td>
                    <el-input-number v-model="data.remotePort" :min="0" :max="65535" style="width: 130px" />
                </td>
            </tr>
            <tr v-show="data.mode == HSMSMode.Passive">
                <th>Local IP</th>
                <td>
                    <el-input v-model="data.localIp" style="width: 130px;"></el-input>
                </td>
                <th>Local Port</th>
                <td>
                    <el-input-number v-model="data.localPort" :min="0" :max="65535" style="width: 130px" />
                </td>
            </tr>
            <tr>
                <th>T3</th>
                <td>
                    <el-input-number v-model="data.t3" :min="1000" :max="120000" style="width: 130px" />
                </td>
                <td>

                </td>
                <td>

                </td>
            </tr>
            <tr>
                <th>T5</th>
                <td>
                    <el-input-number v-model="data.t5" :min="1000" :max="240000" style="width: 130px" />
                </td>
                <th>

                </th>
                <td>

                </td>
            </tr>
            <tr>
                <th>T6</th>
                <td>
                    <el-input-number v-model="data.t6" :min="1000" :max="240000" style="width: 130px" />
                </td>
                <th></th>
                <td></td>
            </tr>
            <tr>
                <th>T7</th>
                <td>
                    <el-input-number v-model="data.t7" :min="1000" :max="240000" style="width: 130px" />
                </td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <th>T8</th>
                <td>
                    <el-input-number v-model="data.t8" :min="1000" :max="240000" style="width: 130px" />
                </td>
                <th>Link Test</th>
                <td>
                    <el-input-number v-model="data.linkTest" :min="1000" :max="60000" style="width: 130px" />
                </td>
            </tr>
        </tbody>
    </table>
</template>